<template>
	<view class="login-bg"
		style="background: url('../../static/image/bg-01.png') no-repeat;background-size: 100% 100%;">
		<view class="login-view">
			<view class="flex-justAliCenter-column margin-bottom50">
				<view class="input-view margin-bottom50">
					<input type="text" v-model="name" placeholder="请输入测评登录码" />
				</view>
				<!-- <view class="input-view margin-bottom50">
					<input type="text" v-model="name" placeholder="输入登录密码" />
				</view> -->
				<view class="login-btn-view flex-center" @click="show = true">登录</view>
			</view>
			<view class="flex-center fontSize-15 color-fff">教练登录入口</view>
		</view>
		<!-- 登录弹窗 -->
		<u-popup :show="show" :round="30">
			<view class="popup-view">
				<view class="fontSize-16 color-000 text-center margin-bottom20 fontWeight-bold">头像与昵称</view>
				<view class="fontSize-13 color-999 text-center margin-bottom50">需要您授权头像与昵称</view>
				<view class="flex-between f-divider1 padding-bottom30">
					<view class="fontSize-15 color-000">头像</view>
					<view class="flex-alignItems-center">
						<button class="avatar-image-btn" open-type="chooseAvatar" @chooseavatar="chooseavatar">
							<image class="img-68 avatar-image img-crisp-edges margin-right20" style="border-radius: 50%;"
								:src="form.avatar?form.avatar:'../../static/image/user-01.png'" mode=""></image>
						</button>
						<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
					</view>
				</view>
				<view class="flex-between f-divider1 padding-bottom30 margin-top30">
					<view class="fontSize-15 color-000">昵称</view>
					<view class="flex-alignItems-center">
						<input type="nickname" style="width: 400rpx;text-align: right;" v-model="name"
							placeholder="输入您的昵称" />
						<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
					</view>
				</view>
				<view class="flex-center margin-top50">
					<view class="cancel-btn-popup flex-center margin-right30" @click="show = false">取消</view>
					<view class="confirm-btn-popup flex-center" @click="$tools.navigateTo('/user/index/index')">确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				show: false,
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.avatar-image-btn {
		// width: 200rpx;
		// height: 200rpx;
		background-color: transparent;
	}

	.avatar-image-btn::after {
		border: 1rpx solid #ffffff;
	}

	.cancel-btn-popup {
		width: 250rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #EE6100;
		background: #F0F0F0;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
	}

	.confirm-btn-popup {
		width: 250rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		background: #EE6100;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
	}

	.login-view {
		position: absolute;
		bottom: 160rpx;
		left: 50rpx;
	}

	.login-btn-view {
		width: 600rpx;
		background-color: #F13E24;
		padding: 30rpx;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 15px;
	}

	.input-view {
		width: 600rpx;
		background-color: #ffffff;
		padding: 30rpx;
		font-size: 15px;
		border-radius: 50rpx;
		color: #792A0B;
	}

	.login-bg {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
</style>